<template>
	<!-- <view>
		  收货地址编辑页面
	</view> -->
	
	<view>
			<view class="p-2 border-bottom d-flex a-center bg-white">
				<view class="font-md text-secondary mr-1 flex-shrink">
					收货人：</view>
				<input class="px-1 font-md flex-1" type="text" value="" 
				v-model="form.name"
				/>
			</view>
			<view class="p-2 d-flex a-center bg-white">
				<view class="font-md text-secondary mr-1 flex-shrink">
					手机号码：</view>
				<input class="px-1 font-md flex-1" type="text" value="" 
				v-model="form.phone"
				/>
			</view>
	
			<divider></divider>

			
			<view class="p-2 border-bottom d-flex a-center bg-white">
						<view class="font-md text-secondary mr-1 flex-shrink">
							所在地区：</view>
						<input class="px-1 font-md flex-1" type="text" disabled 
						@click="showMulLinkageThreePicker" placeholder="请选择所在地区"
						:value="form.path"/>
						
						<!-- @onConfirm="onConfirm" -->
						<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="pickerValue" 
						 
					 @onConfirm="onConfirm"
						 
						> </mpvue-city-picker>
						
			</view>
			
			
			
			<view class="p-2 d-flex a-center bg-white">
				<view class="font-md text-secondary mr-1 flex-shrink">
					详细地址：</view>
				<input class="px-1 font-md flex-1" type="text" value="" 
				v-model="form.detailPath"
				/>
			</view>
	
			<divider></divider>
	
			<view class="p-2 d-flex a-center bg-white">
				<view class="font-md text-secondary mr-1 flex-shrink">
					设为默认地址：</view>
				<switch checked class="ml-auto" color="#FD6801"
				:checked="form.isdefault"
				 @change="form.isdefault = $event.detail.value"
				 />
			</view>
	
			<view class="p-3">
				<!-- @click="submit" -->
				<view class="text-center w-100 main-bg-color text-white font-md rounded py-2" hover-class="main-bg-hover-color"
				 @click="submit"
				
				>
					保 存
				</view>
			</view>
	
		</view>
</template>

<script>
	
	import  {mapMutations,mapActions} from 'vuex'
	
	
	import mpvueCityPicker from "@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue"
	export default {
		
		components:{
			mpvueCityPicker
		},
		data() {
			return {
				isedit:false,
				themeColor: '#007AFF',
				pickerValue: [0, 0, 1],
				
				
				form: {
					path: '',
					name: "",
					phone: "",
					detailPath: "",
					isdefault: false
				}
				
				
			}
		},
		methods: {
			
			...mapMutations(['createPath','editPath']),
			...mapActions(['actionEidtPath']),
			
			
			submit() {
				
				
				if(this.isedit) { // isedit 如果为真 那么就表示是编辑  
				
				// this.editPath(this.form)
				
				this.actionEidtPath(this.form)
				uni.showToast({
					title: '修改地址成功'
				})
				uni.navigateBack({
					delta: 1
				})
				
				this.isedit=false
			   	
				}else  {  // 表示新增收货地址
					
					this.createPath(this.form)
					uni.showToast({
						title: '创建成功'
					})
					uni.navigateBack({
						delta: 1
					})
					
				}
				
				
				
				
				
				
				
			},
			
			onConfirm(e) {
				alert('确定')
				
				console.log(e)
				
				this.form.path=e.label;
				
			},
			
			
			// 显示三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			}
			
			
		},
		
		
		onLoad(e) {
			 // console.log(e)
			 let objPath=JSON.parse(e.pathItem)
			 
			 console.log(objPath)
			 
			 this.form=objPath
			 this.isedit=true
			 
		}
	}
</script>

<style>

</style>
